<template>
	<view>
		<view v-if="fsArr.length>0">
			<view class="list-box" v-for="(m,n) in fsArr" :key="n"
				@click="navTo(`/pages/fans/fans-detail?uid=${m.id}`)">
				<view class="list-head">
					<image class="list-img" :src="m.avatar" mode="aspectFill"></image>
					<view class="list-con" style="width: 500rpx;">
						<view class="align-center">
							<view class="list-name gray3" style="max-width: 330rpx;">{{m.nickname}}</view>
							<!-- 如果是会员/plus会员，显示等级 12-->
							<view class="ml10" v-if="m.level<3">
								<image :src="'../../static/images/icon/vip'+m.level+lang+'.png'" mode="heightFix"
									class="block" style="height: 40rpx;"></image>
							</view>
							<!-- 是运营商会员/运营商plus会员，显示星级 34 -->
							<view class="ml10" v-if="m.level>2">
								<image :src="'../../static/images/icon/'+(m.star-1)+lang+'x.png'" mode="heightFix"
									class="block" style="height: 40rpx;"></image>
							</view>
						</view>
						<view class="list-bz gray6">{{$t('fan').备注}}:{{m.remark || ''}}</view>

						<view class="align-center flex-wrap lable-box">
							<view v-if="m.active_status==1" class="lable-list lable-four">{{$t('fan').未购物}}</view>
							<view v-if="m.active_status==2" class="lable-list lable-four">{{$t('fan').不活跃}}</view>
							<view v-if="m.active_status==3" class="lable-list lable-two">{{$t('fan').低活跃}}</view>
							<view v-if="m.active_status==4" class="lable-list lable-three">{{$t('fan').中活跃}}</view>
							<view v-if="m.active_status==5" class="lable-list lable-one">{{$t('fan').高活跃}}</view>

							<view v-if="m.power_status==2" class="lable-list lable-four">{{$t('fan').不利发展}}</view>
							<view v-if="m.power_status==3" class="lable-list lable-four">{{$t('fan').发展困难}}</view>
							<view v-if="m.power_status==4" class="lable-list lable-two">{{$t('fan').利好发展}}</view>
							<view v-if="m.power_status==5" class="lable-list lable-three">{{$t('fan').稳健发展}}</view>
							<view v-if="m.power_status==6" class="lable-list lable-one">{{$t('fan').发展优异}}</view>

							<view v-if="m.consum_status==2" class="lable-list lable-four">{{$t('fan').无消费力}}</view>
							<view v-if="m.consum_status==3" class="lable-list lable-four">{{$t('fan').低消费力}}</view>
							<view v-if="m.consum_status==4" class="lable-list lable-two">{{$t('fan').偏低消费力}}</view>
							<view v-if="m.consum_status==5" class="lable-list lable-three">{{$t('fan').中消费力}}</view>
							<view v-if="m.consum_status==6" class="lable-list lable-one">{{$t('fan').高消费力}}</view>
							<view v-if="m.consum_status==7" class="lable-list lable-one">{{$t('fan').超高消费力}}</view>
							<!-- <view class="lable-list lable-four">无发展</view> -->
						</view>
					</view>

					<image class="head-right" src="../../static/images/fans/right.png" mode=""></image>
				</view>

				<view class="tj-con">
					<view class="align-center justify-between">
						<view class="con-item">
							<view class="con-text">{{$t('fan').本月自购销售额}}</view>
							<view class="con-num" v-if="m.monthgrade[0]">
								{{parseFloat(m.monthgrade[0].self_f_value ).toLocaleString()}}
							</view>
							<view class="con-num" v-else>0.00</view>
						</view>
						<view class="con-item">
							<view class="con-text">{{$t('fan').粉丝本月销售额_已结算}}</view>
							<view class="con-num" v-if="m.monthgrade[0]">
								{{parseFloat(m.monthgrade[0].new_f_valued).toLocaleString() }}
							</view>
							<view class="con-num" v-else>0</view>
						</view>
					</view>
					<view class="align-center justify-between">
						<view class="con-item">
							<view class="con-text">{{$t('fan').粉丝累计销售额}}</view>
							<view class="con-num">{{parseFloat(m.total_sell).toLocaleString() || 0}}</view>
						</view>
						<view class="con-item">
							<view class="con-text">{{$t('fan').粉丝本月销售额}}</view>
							<view class="con-num" v-if="m.monthgrade[0]">
								{{parseFloat(m.monthgrade[0].new_f_value).toLocaleString() }}</view>
							<view class="con-num" v-else>0</view>
						</view>
					</view>
				</view>

				<!-- 				<view>
					<view class="time-box" v-if="m.vipaward[0]">{{$t('fan').最近下单时间}} {{m.vipaward[0].t_created}}</view>
					<view class="time-box" v-else>{{$t('fan').最近下单时间}}   {{$t('fan').暂未下单}} </view>
					<view class="time-box">{{$t('fan').最近访问时间}} {{m.updated_at || '--'}}</view>
				</view> -->
			</view>
		</view>
		<view class="mt10 tc" v-else>
			<image src="../../static/images/empty/none.png" mode="aspectFill" style="width: 520upx;height: 380upx;">
			</image>
			<view class="ft15">{{$t('common').暂无数据}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 粉丝列表
			fsArr: {
				type: Array,
				default: []
			}
		},

		data() {
			return {
				lang: ''
			}
		},

		onLoad() {
			this.lang = uni.getStorageSync('lang').lang
		},
		mounted() {
			this.lang = uni.getStorageSync('lang').lang
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	// 粉丝列表
	.list-box {
		padding: 32rpx 32rpx 0rpx 32rpx;
		box-sizing: border-box;
		margin-bottom: 24rpx;
		border-radius: 16rpx;
		background: #FFFFFF;

		.list-head {
			display: flex;
			position: relative;

			.head-right {
				width: 10rpx;
				height: 18rpx;
				position: absolute;
				right: 0rpx;
				top: 30rpx;
			}

			.list-img {
				width: 80rpx;
				height: 80rpx;
				border-radius: 100rpx;
				border: 2rpx solid #FFFFFF;
			}

			.list-con {
				width: 530rpx;
				margin-left: 20rpx;

				.list-name {
					font-size: 30rpx;
					margin-right: 20rpx;
				}

				.list-xj {
					width: 115rpx;
				}

				.list-bz {
					font-size: 24rpx;
					margin-top: 18rpx;
				}

				.lable-box {
					margin-top: 18rpx;

					.lable-list {
						padding: 6rpx 16rpx;
						border-radius: 100rpx;
						font-size: 24rpx;
						margin: 0 16rpx 16rpx 0;
					}

					.lable-one {
						background: #FFE5E4;
						border: 2rpx solid #F44A42;
						color: #F44A42;
					}

					.lable-two {
						background: #FFF0CC;
						border: 2rpx solid #FD9E37;
						color: #FD9E37;
					}

					.lable-three {
						background: #F0F7E5;
						border: 2rpx solid #70B603;
						color: #70B603;
					}

					.lable-four {
						background: rgba(195, 195, 195, 0.1);
						border: 2rpx solid #B9B9B9;
						color: #B9B9B9;
					}
				}

			}
		}

		.tj-con {
			margin-top: 20rpx;
			// border-bottom: 2rpx solid #EEEEEE;

			.con-item {
				width: 50%;
				margin-bottom: 40rpx;

				.con-text {
					color: #666666;
					font-size: 24rpx;
					margin-bottom: 16rpx;
				}

				.con-num {
					color: #333333;
					font-size: 36rpx;
					font-weight: bold;
				}
			}
		}

		.time-box {
			color: #666666;
			font-size: 24rpx;
			margin-top: 24rpx;
		}
	}
</style>